<template>
	<div>
		<div class="name">{{username}}</div>
		
		<router-link to="/" class="item" style="margin-top:0" v-if="5>=1">
			<p><Icon type="ios-home"></Icon></p>
			<p>首页</p>
		</router-link>
		<router-link to="/imanager" class="item" v-if="5>=2">
			<p><Icon type="person"></Icon></p>
			<p>个人</p>
		</router-link>
		<router-link to="/postnews" class="item" v-if="5>=2">
			<p><Icon type="clipboard"></Icon></p>
			<p>发帖</p>
		</router-link>
		<router-link to="/people" class="item" v-if="5>=2">
			<p><Icon type="ios-people"></Icon></p>
			<p>成员</p>
		</router-link>
		<router-link to="/report" class="item" v-if="5>=2">
			<p><Icon type="android-clipboard"></Icon></p>
			<p>汇报</p>
		</router-link>
		<div class="item itemBoom" @click="logmodal">
			<p><Icon type="flash-off"></Icon></p>
		</div>
		<Modal v-model="modal" width="360">
			<p slot="header" style="color:#f60;text-align:center">
				<Icon type="information-circled"></Icon>
				<span>注销确定！</span>
			</p>
			<div style="text-align:center">
				<p>在注销之后你的信息将被清空！</p>
				<p>是否要注销？</p>
			</div>
			<div slot="footer">
				<Button type="error" size="large" long @click="logout">注销</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
import { mapState,mapMutations  } from 'vuex'
import information from './../api/information.js'
import login from './../api/login.js'
export default {
	name: 'navBar',
	data () {
		return {
			modal:false,
			username:''
		}
	},
	computed: {
		...mapState({
			name:state=>state.information.name,
			identity:state=>state.information.name
			})
	},
	watch:{
		name(val){
			this.username=val
		}
	},
	methods:{
		...mapMutations({
			// setInformation:mutations=>mutations.setInformation, 
			// 'information.setCampus',
			// 'information.setDepartment'
			}),
		logmodal(){
			this.modal=true
		},
		logout(){
			this.modal=false
			login.out()
			.then(data=>{
				this.$Message.success(data);
				this.$router.push({path:'/login'});
			})
			.catch(err => {
				this.$Message.error(err);
			})	
		},
		getDtat(){
			
			this.username=this.$store.state.information.name
		}
	},
	created:function(){
		// this.setInformation
		this.$store.commit('setInformation')
		this.$store.commit('setCampus')
		this.$store.commit('setDepartment')
	},
	mounted:function(){
		this.getDtat()
	}
}
</script>

<style lang="css" scoped>
.nav-bar .name{
	width: 60px;
	height: 60px;
	border-radius: 30px;
	margin-left: 10px;
	margin-top: 15px;
	margin-bottom: 20px;
	line-height: 60px;
	text-align: center;
	color: #fff;
	font-size: 20px;
	cursor: pointer;
	float: left;
	background-color: #22baa0;
	font-family: 楷体
}
.nav-bar{
	float: left;
	position: relative;
}
.nav-bar .item{
	width: 80px;
	text-align: center;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: #8e9eae;
	float: left;
	margin-top: 20px;
	cursor: pointer;
}
.nav-bar .itemBoom{
	position: absolute;
	bottom: 20px;
}

.nav-bar .item:hover{
	color: #e1e5e9
}
.nav-bar .item p i{
	font-size: 33px
}
.nav-bar .router-link-exact-active p{
	color: #e1e5e9;
}
</style>